<template>
	<view class="user">
		<w-user-info :user="userInfo" :is-login="isLogin" />


		<!-- 	<view class="coupon-center">
			<image mode="widthFix" src="../../static/coupon.png"></image>
		</view> -->	

		<view class="mt30 mb20 r_area_block_1" style="margin-top: -30rpx;"> 
			<view class="pt25 pb25 ">
				<view class="flex_box " style="justify-content: space-between;">
					<view >
						<view class="card-title fwb">
							<view class="card-title-z">我的订单</view>
							<view class="card-title-line"></view>
						</view>
					</view>
					<view  @click="toPath('/pages/orderlist/orderlist')" class="df aic" >
						<view class="fs24 cor_333 mr-[12rpx]">查看全部</view>
						<u-icon name="arrow-right" color="#FF4907" size="28"></u-icon> 

						<!-- <image src="@/static/my/arrow_r@2x.png" class="ml15 vt" style="width: 24rpx; height: 24rpx;"> -->
						<!-- </image> -->
					</view>
				</view>
			</view>
			<view class="mt30 df fw tac pb35" style="margin-left: -30rpx; margin-right: -30rpx;">
				<view @click="toPath('/pages/orderlist/orderlist')" class="wp25">
					<image src="@/static/my/icon_order01@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">已下单</view>
				</view>
				<view @click="toPath('/pages/orderlist/orderlist')" class="wp25">
					<image src="@/static/my/icon_order02@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">已发货</view>
				</view>
				<view @click="toPath('/pages/orderlist/orderlist')" class="wp25">
					<image src="@/static/my/icon_order03@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">质检中</view>
				</view>
				<view @click="toPath('/pages/orderlist/orderlist')" class="wp25">
					<image src="@/static/my/icon_order04@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">待确认</view>
				</view>
			</view>
		</view>

		<view class="mb20 r_area_block_1" style="margin-top: 30rpx;">
			<view class="pt25 pb25 ">
				<view class="flex_box aic">
					<view >
						<view class="card-title fwb">
							<view class="card-title-z">常用功能</view>
							<view class="card-title-line"></view>
						</view>
					</view>
				</view>
			</view>
			<view class=" df fw tac pb35" style="margin-left: -30rpx; margin-right: -30rpx;">

				<!-- 	<view class="mt50 wp25">
					<image src="@/static/icon_or_05.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">回收流程</view>
				</view> -->
				
				<view class=" wp50" @click="toPath('/pages/address/address')" style="border-right: 2rpx solid #eee;">
					<image src="@/static/my/icon_my_address@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">邮寄地址</view>
				</view>
				
				
				
				<view class=" wp50" @click="showImage(state.info.zszx)">
					<image src="@/static/my/icon_my_zhaoshang@2x.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">招商咨询</view>
				</view>
				<!-- pages/fan_kui/fan_kui -->
			<!-- 	<view class="mt50 wp25" @click="toPath('/pages/fan_kui/fan_kui')">
					<image src="@/static/icon_or_08.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">投诉建议</view>
				</view> -->
				<view class="mt50 wp25" v-if="false">
					<image src="@/static/icon_or_09.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">常见问题</view>
				</view>
				<!-- <view class="mt50 wp25">
					<image src="@/static/icon_or_10.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">广告录音</view>
				</view> -->
			<!-- 	<view class="mt50 wp25" >
					<image src="@/static/icon_or_11.png" class="img_10 vt"></image>
					<view class="mt15 fs26 lh36">我要合作</view>
				</view> -->

			</view>
		</view>



		<view class="zixun-warp flex"> 
			<view class="zixun-btn" @click="showImage(state.info.kfwx)">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/my/wechat@2x.png"></image>
				<view class="ml-[20rpx]">客服微信</view>
			</view>
			<view class="zixun-btn" @click="call(state.info.tel)">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/my/call@2x.png"></image>
				<view class="ml-[20rpx]">客服电话</view>
			</view>
		</view>
		
		<view class="mt-[18rpx] text-[24rpx] leading-[32rpx] text-[#999] df fldc aic">
			<view class="">闲品侠平台欢迎您！</view>
			<view class="">竭诚为您服务</view>
		</view>
	
		<tabbar />
	</view>
</template>

<script setup lang="ts">
	import { getDecorate } from '@/api/shop'
	import { useUserStore } from '@/stores/user'
	import { onShow } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { reactive } from 'vue'
	import {call,showImage} from "@/utils/tools.ts"
	const state = reactive<{
		pages : any[],
		info: any
	}>({
		pages: [],
		info:{},
	})
	const getData = async () => {
		const data = await getDecorate({ id: 2 })
		state.pages = JSON.parse(data.data)
		state.info =  data;
	}
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)


	

	const toPath = (link : any) => {

		if (isLogin.value == false) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
			return false;
		}
		uni.navigateTo({
			url: link
		})

	}

	onShow(() => {
		userStore.getUser()
	})
	getData()
</script>

<style lang="scss">
	
	.zixun-warp{
		padding: 30rpx 15rpx;
		.zixun-btn{
			display: flex;
			margin: 0 15rpx;
			background-color: #fff;
			border-radius: 20rpx;
			flex: 1;
			padding: 24rpx 0;
			justify-content: center;
			line-height: 80rpx;
			// text-align: center;
		}
	}
	
	.card-title{
		position: relative;
		// background-color: red;
		// width: 4rem;
		.card-title-z{
			// line-height: 1;
			z-index: 20;
			position: relative;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
		}
		.card-title-line{
			position: absolute;
			height: 12rpx;
			background-color: rgba(255, 73, 7, .6);
			width: 100%;
			bottom: 0;
			z-index: 1;
		}
	}
	
	.coupon-center {
		padding: 0 30rpx;
		margin-top: 20rpx;

		image {
			height: 100rpx;
			width: 100%;
		}
	}

	page {
		background: #F4F6F8;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.daohangcaidan {
		border-left: 1px solid #eee;
		// border-right: 1px solid #eee;
	}

	.header_bg_sty {
		position: relative;
		padding-top: 140rpx;
		height: 411rpx;
		background: linear-gradient(137deg, #D5FFCC 0%, #FEFFF5 99%);
	}

	.r_box_sty_1 {
		position: relative;
		padding-left: 17rpx;
		width: 340rpx;
		height: 52rpx;
		background: rgba(223, 238, 221, 0.5);
		/* border-radius: 26rpx; */
	}

	.line_ver_cur {
		position: relative;
		width: 1px;
		height: 28rpx;
		background: #C3DCBF;
	}

	.inlet_box_1,
	.inlet_box_2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 318rpx;
		height: 114rpx;
		font-size: 32rpx;
		font-weight: bold;
		z-index: 2;
	}

	.inlet_box_1 {
		padding-left: 37rpx;
		color: #874F09;
	}

	.inlet_box_2 {
		padding-left: 29rpx;
		color: #F0D8B6;
	}

	.r_area_block_1 {
		position: relative;
		padding: 0 30rpx;
		// border-radius: 10rpx;
		margin: 0 30rpx;
		background: #fff;
		border-radius: 20rpx;
	}
</style>